<template>
  <div class="mb-20" style="padding-top: 44px">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="nav">首页 / 园区详情 / {{ yuanqu.yuanquname }}</div>

          <div class="content flex flex-row">
            <div style="width: 594px" class="bg-[#FFFFFF] left flex-1">
              <div
                class="picture"
                style="position: relative; background-color: #fff"
              >
                <div style="">
                  <iframe
                    v-if="yuanqu.ifvr == 'Y' && bannerIndex == 0"
                    :src="yuanqu.vrurl"
                    frameborder="no"
                    class="w-full"
                    height="312px"
                    allowfullscreen="true"
                    style="
                      background-color: #fff;
                    "
                  ></iframe> 
                  <!-- <iframe
                    v-if="yuanqu.ifvr == 'Y' && bannerIndex == 0"
                    :src="yuanqu.vrurl"
                    frameborder="no"
                    class="w-full"
                    height="312px"
                    allowfullscreen="true"
                    style="
                      background-image: url(http://1stzone.cn/admin/profile/upload/2022/12/05/12987ac4-34e7-4756-8653-8cd367493379.jpg);
                    "
                  ></iframe> -->
                  <img
                    v-if="yuanqu.iftp == 'Y' && bannerIndex == 1"
                    class="w-full"
                    style="height: 312px"
                    :src="yuanqu.pictureurl"
                  />
                  <video
                    v-if="yuanqu.ifsp == 'Y' && bannerIndex == 2"
                    class="w-full"
                    style="height: 263px"
                    controls
                  >
                    <source :src="yuanqu.yuanqushipinurl" type="video/mp4" />
                  </video>
                  <baidu-map
                    v-if="yuanqu.ifdt == 'Y' && bannerIndex == 3"
                    class="bannermap"
                    :center="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }"
                    :zoom="mapZoom"
                    :scroll-wheel-zoom="true"
                  >
                    <bm-navigation
                      anchor="BMAP_ANCHOR_TOP_RIGHT"
                    ></bm-navigation>
                    <bm-marker
                      :position="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }"
                      :icon="{
                        url: 'http://1stzone.cn/admin/profile/upload/2022/11/17/4f1a4f3d-e947-4b7f-b62b-7aadf358c81a.png',
                        size: { width: 20, height: 20 },
                      }"
                    >
                      <bm-label
                        :content="yuanquMapContent"
                        :labelstyle="{ color: 'red', fontsize: '10px' }"
                        :offset="{ width: 12, height: -80 }"
                      ></bm-label>
                    </bm-marker>
                  </baidu-map>
                </div>
                <div
                  class="flex flex-row justify-evenly items-center"
                  style="
                    color: #ffffff;
                    font-size: 18px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 49px;
                    background: rgba(0, 0, 0, 0.3);
                  "
                >
                  <div
                    v-if="yuanqu.ifvr == 'Y'"
                    class="w-title"
                    @click="changeBannerIndex(0)"
                    style="cursor: pointer"
                  >
                    <div class="flex flex-row justify-center items-center text">
                      <img
                        src="../assets/camera.png"
                        style="width: 21px; height: 18px"
                      />
                      <div style="margin-left: 8px">全景</div>
                    </div>
                    <i
                      :class="
                        bannerIndex == 0
                          ? 'text-[#FFFFFF]'
                          : 'text-opacity-0 text-[#000000]'
                      "
                      class="el-icon-caret-top icon"
                    ></i>
                  </div>
                  <div
                    v-if="yuanqu.iftp == 'Y'"
                    class="w-title"
                    @click="changeBannerIndex(1)"
                    style="cursor: pointer"
                  >
                    <div class="flex flex-row justify-center items-center text">
                      <img
                        src="../assets/picture.png"
                        style="width: 21px; height: 18px"
                      />
                      <div style="margin-left: 8px">图片</div>
                    </div>
                    <i
                      :class="
                        bannerIndex == 1
                          ? 'text-[#FFFFFF]'
                          : 'text-opacity-0 text-[#000000]'
                      "
                      class="el-icon-caret-top icon"
                    ></i>
                  </div>
                  <div
                    v-if="yuanqu.ifsp == 'Y'"
                    class="w-title"
                    @click="changeBannerIndex(2)"
                    style="cursor: pointer"
                  >
                    <div class="flex flex-row justify-center items-center text">
                      <img
                        src="../assets/vedio.png"
                        style="width: 21px; height: 18px"
                      />
                      <div style="margin-left: 8px">视频</div>
                    </div>
                    <i
                      :class="
                        bannerIndex == 2
                          ? 'text-[#FFFFFF]'
                          : 'text-opacity-0 text-[#000000]'
                      "
                      class="el-icon-caret-top icon"
                    ></i>
                  </div>
                  <div
                    v-if="yuanqu.ifdt == 'Y'"
                    class="w-title"
                    @click="changeBannerIndex(3)"
                    style="cursor: pointer"
                  >
                    <div class="flex flex-row justify-center items-center text">
                      <img
                        src="../assets/map.png"
                        style="width: 21px; height: 18px"
                      />
                      <div style="margin-left: 8px">地图</div>
                    </div>
                    <i
                      :class="
                        bannerIndex == 3
                          ? 'text-[#FFFFFF]'
                          : 'text-opacity-0 text-[#000000]'
                      "
                      class="el-icon-caret-top icon"
                    ></i>
                  </div>
                </div>
              </div>
              <div class="p-4">
                <div class="xiangmucanshu">
                  <div class="canshu">基本信息</div>
                </div>

                <div class="mt-4 flex flex-row">
                  <div class="flex flex-row">
                    <div class="lable" style="width: 100px">产业画像：</div>
                    <div class="items flex flex-row flex-wrap">
                      <div
                        v-for="(item, index) in yuanqu.hangyeleixingArr"
                        :key="index"
                        class="item"
                      >
                        {{ item }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="itemlist flex flex-row">
                  <div class="item flex flex-row">
                    <div class="lable">电压：</div>
                    <div class="value">{{ yuanqu.dianya }}v</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">居民用电：</div>
                    <div class="value">{{ yuanqu.juminyongdian }}元/度</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">商业用电：</div>
                    <div class="value">{{ yuanqu.shangyeyongdian }}元/度</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">工业用电：</div>
                    <div class="value">{{ yuanqu.gongyeyongdian }}元/度</div>
                  </div>
                </div>
                <div class="itemlist flex flex-row">
                  <div class="item flex flex-row">
                    <div class="lable">生活用水：</div>
                    <div class="value">{{ yuanqu.shenghuoyongshui }}元/吨</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">中性水：</div>
                    <div class="value">{{ yuanqu.zhongxingshui }}元/吨</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">水蒸气：</div>
                    <div class="value">{{ yuanqu.shuizhengqi }}元/吨</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">污水处理：</div>
                    <div class="value">{{ yuanqu.wushuichuli }}元/吨</div>
                  </div>
                </div>
                <div class="itemlist flex flex-row">
                  <div class="item flex flex-row">
                    <div class="lable">天然气：</div>
                    <div class="value">{{ yuanqu.tianranqi }}元/立方</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">暖气：</div>
                    <div class="value">{{ yuanqu.nuanqi }}元/月</div>
                  </div>
                </div>
                <div class="itemlist flex flex-row">
                  <div class="item flex flex-row">
                    <div class="lable">最低工资：</div>
                    <div class="value">{{ yuanqu.zuidigongzi }}元/月</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">普工：</div>
                    <div class="value">{{ yuanqu.pugong }}元/月</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">管理：</div>
                    <div class="value">{{ yuanqu.zhongjiguanli }}元/月</div>
                  </div>
                  <div class="item flex flex-row">
                    <div class="lable">高层：</div>
                    <div class="value">{{ yuanqu.gaocengguanli }}元/月</div>
                  </div>
                </div>

                <div class="qiyeitem flex flex-row">
                  <div class="flex flex-row">
                    <div class="lable">入驻企业：</div>
                    <div class="items flex flex-row flex-wrap">
                      <div
                        v-for="(item, index) in yuanqu.ruzhuqiyeArr"
                        :key="index"
                        class="item"
                      >
                        {{ item }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="xiangmucanshu">
                  <div class="canshu">资料下载</div>
                </div>
                <div class="ziliaoxiazai">
                  <div
                    @click="download(yuanqu.yuanqufileurl)"
                    style="cursor: pointer"
                  >
                    下载
                  </div>
                </div>
                <div class="xiangmucanshu flex flex-row">
                  <div class="canshu">门槛限制</div>
                  <div class="menkan"></div>
                </div>
                <div class="menkanvalue" v-html="yuanqu.content"></div>

                <!-- <baidu-map>
			<bm-view class="map">
    </bm-view>
    <bm-driving
      :start='{lng:newlng, lat: newlat}'
      :end='{lng:yuanqu.jingdu,lat:yuanqu.weidu}'
	  startCity="北京"
      endCity="南京"
     ></bm-driving>
  </baidu-map> -->
                <!-- <baidu-map style="position: relative; top: -100px;" :center="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }" :zoom="mapZoom" :scroll-wheel-zoom="true">
    <bm-view class="map">
    </bm-view>
    <bm-driving
	:start='{lng:newlng, lat: newlat}'
      :end='{lng:yuanqu.jingdu,lat:yuanqu.weidu}'
      :auto-viewport="true"
      :waypoints="[{lng:newlng, lat: newlat},{lng:yuanqu.jingdu,lat:yuanqu.weidu}]"></bm-driving>
  </baidu-map> -->

                <div class="menkanvalue"></div>
              </div>
            </div>

            <div class="right ml-4">
              <div class="bg-[#FFFFFF] p-4 yuanquxinxi text-[10px]">
                <div class="flex flex-row">
                  <div class="hangleft">
                    <div class="text-lg text-[#000000]">
                      {{ yuanqu.yuanquname }}
                      <!-- {{ yuanqu.jingdu }} -->
                    </div>
                    <div class="text-[10px] text-[#000000]">
                      {{ yuanqu.address }}
                      <!-- {{ yuanqu.weidu }} -->
                    </div>
                  </div>
                  <div class="hangright">
                    <div class="picture">
                      <img class="h-12" :src="yuanqu.logourl" />
                    </div>
                  </div>
                </div>

                <div class="mt-4 flex flex-row mt-5">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">国家级别：</div>
                    <div class="text-[#0B0B0B]">{{ yuanqu.guojiajibie }}</div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">成立年份：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.chenglinianfen }}
                    </div>
                  </div>
                </div>

                <div class="mt-4 flex flex-row">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">所属省市：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.provincename }}{{ yuanqu.cityname }}
                    </div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">规划面积：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.guihuamianji }}平方米
                    </div>
                  </div>
                </div>

                <div class="mt-4 flex flex-row">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">办公房租：</div>
                    <div class="text-[#0B0B0B]">
                      {{ `${yuanqu.bangongfangzu}元/㎡/天` }}
                    </div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">工业地价：</div>
                    <div class="text-[#0B0B0B]">
                      {{ `${yuanqu.gongyedijia}万/亩起` }}
                    </div>
                  </div>
                </div>

                <div class="mt-4 flex flex-row">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">园区类型：</div>
                    <div class="text-[#0B0B0B]">{{ yuanqu.yuanquleixing }}</div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">土地均价：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.tudijunjia }}万元/亩
                    </div>
                  </div>
                </div>
                <div class="mt-4 flex flex-row">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">土地存量：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.tudicunliang }}亩
                    </div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 text-[#9C9C9C]">建筑面积：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.jianchengmianji }}平方米
                    </div>
                  </div>
                </div>

                <div class="mt-4 flex flex-row">
                  <div class="w-6/12 flex flex-row">
                    <div class="w-16 w-16 text-[#9C9C9C]">税收要求：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.shuishouyaoqiu }}万元/亩
                    </div>
                  </div>
                  <div class="w-6/12 flex flex-row">
                    <div class="w-17 text-[#9C9C9C]">园区年GDP：</div>
                    <div class="text-[#0B0B0B]">
                      {{ yuanqu.yuanquniangdp }}亿元
                    </div>
                  </div>
                </div>

                <div class="detail" v-html="yuanqu.details"></div>
              </div>
              <div style="position: relative" id="createParkForm">
                <div class="duijie">
                  <div>
                    <div class="liuyanban">留言板</div>
                    <div class="px-4 py-2">
                      <el-radio v-model="form.type" label="1"
                        >园区登记</el-radio
                      >
                      <el-radio v-model="form.type" label="2"
                        >项目登记</el-radio
                      >
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="园区名称"
                        v-model="form.yuanqiname"
                        prefix-icon="el-icon-school"
                      ></el-input>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="姓名"
                        v-model="form.name"
                        prefix-icon="el-icon-user"
                      ></el-input>
                    </div>
                    <div class="px-4 py-2">
                      <el-input
                        placeholder="电话（必填）"
                        v-model="form.mobile"
                        prefix-icon="el-icon-mobile-phone"
                      ></el-input>
                    </div>
                    <div class="px-4 flex justify-end">
                      <a
                        href="#"
                        class="fasongitem"
                        @click="addContact"
                        style="cursor: pointer"
                        >发送</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="xiangmucanshu">
            <div class="canshu">交通配套</div>
            <div class="jiaotong">
              <div class="items flex flex-row">
                <div
                  class="item"
                  :class="mapSwitch == '收费站' ? 'active' : ''"
                  @click="handleMapSwitch('收费站')"
                  style="cursor: pointer"
                >
                  收费站
                </div>
                <div
                  class="item"
                  :class="mapSwitch == '机场' ? 'active' : ''"
                  @click="handleMapSwitch('机场')"
                  style="cursor: pointer"
                >
                  机场
                </div>
                <div
                  class="item"
                  :class="mapSwitch == '火车站' ? 'active' : ''"
                  @click="handleMapSwitch('火车站')"
                  style="cursor: pointer"
                >
                  火车站
                </div>
                <div
                  class="item"
                  :class="mapSwitch == '银行，医院，超市，酒店，景区' ? 'active' : ''"
                  @click="handleMapSwitch('周边配套')"
                  style="cursor: pointer"
                >
                  周边配套
                </div>
              </div>
              <div class="jiaotongditu" style="margin-bottom: 0px">
                <baidu-map
                  class="map"
                  :center="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }"
                  :zoom="mapZoom"
                  :scroll-wheel-zoom="true"
                >
                  <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                  <bm-circle
                    :center="circlePath.center"
                    :radius="circlePath.radius"
                    stroke-color="blue"
                    :stroke-opacity="0.5"
                    :stroke-weight="2"
                    @lineupdate="updateCirclePath"
                    :editing="true"
                  ></bm-circle>
                  <bm-marker
                    :position="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }"
                    :icon="{
                      url: 'http://1stzone.cn/admin/profile/upload/2022/11/17/4f1a4f3d-e947-4b7f-b62b-7aadf358c81a.png',
                      size: { width: 25, height: 25 },
                    }"
                  >
                    <div class="optionback">
                      <bm-label
                        :content="yuanquMapContent"
                        :labelstyle="{ color: 'red', fontsize: '10px' }"
                        :offset="{ width: 12, height: -80 }"
                      ></bm-label>
                    </div>
                  </bm-marker>
                  
                
                    <bm-marker
                    v-for="(point, index) in localPointList"
                    :key="index"
                    @click="infoWindowOpen(point)"
                   :position="{
                     lng: point.location.lng,
                     lat: point.location.lat,
                   }"
                   :dragging="true"
                   :icon="{
                     url: 'http://www.gigacre.com/static/home/pc/images/lo.svg',
                     size: { width: 25, height: 25 },
                   }"
                 >
                 <!--  -->
                   <bm-label
                       :content="labelconarry[index]"
                       :label-style="{ background: 'rgb(204,41,41)',border:0,color:'white',zIndex:100, fontSize:'12px' }"
                       :offset="{ width: 8, height: 4 }"
                     ></bm-label>
                   
                
                   <bm-info-window
                     :show="point.detail != 1"
                     @close="infoWindowClose(point)"
                     @open="infoWindowOpen(point)"
                   >
                     {{ point.name }}（{{ point.address }}）
                     
                   </bm-info-window>
                 </bm-marker>
               
                 
                  <!-- <div v-if="shwordl">
													
												</div> -->
												<div class="mapoptions options" v-if="shwordl">
                <div class="optiontop">
                  <div></div>
                  <div>
                    <!-- <p style="font-weight: bold;">5.0公里</p>
													<p style="color: rgb(221,221,221);">总路程</p> -->
                  </div>
                  <div>
                    <!-- <p style="font-weight: bold;">11分钟</p>
													<p style="color: rgb(221,221,221);">大约需要</p> -->
                  </div>
                  <img
                    src="../assets/close.png"
                    style="width: 28px"
                    @click="shwordl = false"
                    alt=""
                  />
                </div>
                <div style="height: 370px; width: 390px; overflow: auto">
             
                    <bm-driving
                      :start="{ lng: newlng, lat: newlat }"
                      :end="{ lng: yuanqu.jingdu, lat: yuanqu.weidu }"
                      :autoViewport="true"
					  :location='yuanqu.yuanquname'
                      :waypoints="[
                        { lng: newlng, lat: newlat },
                        { lng: yuanqu.jingdu, lat: yuanqu.weidu },
                      ]"
                    ></bm-driving>
                
                </div>
              </div>
                </baidu-map>
              </div>

              <div class="maplable">
                <div
                  class="maplableitem"
                  v-for="(item, index) in localPointList"
                  :key="index"
                >
                  <p class="locback">{{ index + 1 }}</p>
                  <div>
                    <div style="display: flex">
                      <img
                        style="width: 35px; height: 20px"
                        src="../assets/road.png"
                        alt=""
                        v-if="mapSwitch == '收费站'"
                      />
                      <img
                        style="width: 35px; height: 20px"
                        src="../assets/plane.png"
                        alt=""
                        v-if="mapSwitch == '机场'"
                      />
                      <img
                        style="width: 35px; height: 20px"
                        src="../assets/train.png"
                        alt=""
                        v-if="mapSwitch == '火车站'"
                      />
                      <img
                        style="width: 35px; height: 20px"
                        src="../assets/around.png"
                        alt=""
                        v-if="mapSwitch == '周边配套'"
                      />
                      <p style="color: rgb(61, 122, 211)" class="chaochu">
                        {{ item.name }}
                      </p>
                    </div>
                    <div style="color: rgb(198, 199, 204)" class="chaochu">
                      {{ item.address }}
                    </div>
                  </div>
                  <div style="display: flex; width: 100px; cursor:pointer;"  @click="
                        showrond(item.location.lat, item.location.lng, index)
                      ">
                    <img
                      style="width: 25px; height: 15px"
                     
                      src="../assets/po.png"
                      alt=""
                    />
                    <span style="width: 55px">
                      {{
                        parseInt(
                          space(
                            yuanqu.weidu,
                            yuanqu.jingdu,
                            item.location.lat,
                            item.location.lng
                          )
                        )
                      }}公里
                    </span>
                   
                  </div>
                </div>
              </div>
             
            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import NavBar from "@/components/NavBar.vue";
import { fetchPark } from "@/api/park";
import { createContact } from "@/api/contact";
import { getMapLocalSearch } from "@/api/common";

export default {
  name: "ParkDetailView",
  components: {
    NavBar,
  },
  data() {
    return {
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915,
        },
        radius: 10000,
      },
      active: false,
      newlng: null,
      newlat: null,
      shwordl: false,
      keyword: "加油站",
      whether: false,
      yuanqu: {},
      
      form: {
        type: "1",
        yuanqiname: "",
        name: "",
        mobile: "",
      },
      bannerIndex: 0,
      mapSwitch: "收费站", // plane train around
      mapCenter: { lng: 112.951737, lat: 27.929792 },
      mapZoom: 10,
      localPointList: [],
    };
  },
  created() {
    fetchPark(this.$route.params.id).then((response) => {
      this.yuanqu = response.data;
      if (this.yuanqu.ifvr !== "Y") {
        this.changeBannerIndex(1);
      }

      this.circlePath.center.lng = this.yuanqu.jingdu;
      this.circlePath.center.lat = this.yuanqu.weidu;
      getMapLocalSearch({
        query: this.mapSwitch,
        region: this.yuanqu.cityname,
        center: `${this.yuanqu.weidu},${this.yuanqu.jingdu}`,
      }).then((response) => {
      
        this.localPointList = response.data.results;
      });
    });
  },
  mounted() {
    // this.getDataByParams()
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  computed: {
    yuanquMapContent() {
      return (
        '<div style="padding:10px;"><span style="color:#FE7743;font-size:16px;font-weight:bold;">' +
        this.yuanqu.yuanquname +
        "</span><br />地址：" +
        this.yuanqu.address +
        "<br />"
      ); // +
      // this.yuanqu.jingdu + ',' + this.yuanqu.weidu + '</div>'
    },
    labelconarry(){
      return [ 'A','B','C','D','E','F','J','H','I','J']
    }

  },
  methods: {
    
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
      this.circlePath.radius = e.target.getRadius();
    },
    // 	 getDataByParams() {
    //   axios.get("http://api.map.baidu.com/directionlite/v1/driving",

    //   { params: { origin:(40.01116,116.339303),
    //   destination:(39.936404,116.452562),
    //   ak:'HtLWUXsVUHNzFy44yvaQwwZZTz9e2P0e' }
    //   })
    //     .then((data) => {
    //       console.log(data);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    showrond(lat, lng, index) {
      this.shwordl = true;
      console.log(lat, lng);
      this.newlng = lng;
      this.newlat = lat;
      this.thindex = index;
      console.log(this.yuanqu.jingdu, this.yuanqu.weidu);
    },
    // 根据经纬度实现距离
    space(lat1, lng1, lat2, lng2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      return s; // 单位千米
    },

    download(url) {
      alert(url);
    },
    addContact() {
      createContact(this.form).then((response) => {
        // console.info(response.data)
      });
    },
    changeBannerIndex(i) {
      this.bannerIndex = i;
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var offsetTop = document.querySelector("#createParkForm").offsetTop;
      this.whether = scrollTop > offsetTop;
    },
    handleMapSwitch(item) {
      this.mapSwitch = item;
      console.log(this.mapSwitch);
      if(this.mapSwitch=='周边配套'){
        this.mapSwitch='银行，医院，超市，酒店，景区'
      }
      getMapLocalSearch({
        query: this.mapSwitch,
        region: this.yuanqu.cityname,
        center: `${this.yuanqu.weidu},${this.yuanqu.jingdu}`,
      }).then((response) => {
        this.localPointList = response.data.results;
        // console.log(this.localPointList);
      });
    },
    infoWindowOpen(point) {
      point.detail = 0;
    },
    infoWindowClose(point) {
      point.detail = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .navtrans-res {
  width: 370px !important;
  border: 0;
}
.sample {
  width: 120px;
  height: 120px;
  background: rgb(23, 161, 230);
  opacity: 0.3;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #0d51d8;
  //   top: -100px;
}

.maplable {
  padding: 10px;
  // border: 1px solid red;
  position: relative;
  top: -300px;
  width: 400px;
  height: 380px;
  left: 20px;
  overflow: auto;
  background-color: white;
  font-size: 12px;
}
.mapoptions {
  padding: 10px;
  // border: 1px solid red;
  position: relative;
  top: -580px;
  width: 400px;
  height: 380px;
  left: 20px;
  background-color: white;
  font-size: 12px;
}

.maplable .maplableitem {
  display: flex;
  justify-content: space-between;
}
::-webkit-scrollbar {
  width: 6px;
  background-color: rgb(178, 178, 178);
}
.optioncenter {
  height: 200px;
  overflow: auto;
  margin-top: 36px;
}
.optioncenter .centeritem {
  padding: 5px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(221, 221, 221);
}
.maplable .maplableitem .chaochu {
  width: 200px;
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}
.maplable .maplableitem .locback{
  // border: 1px solid red;
  width: 28px;
  height: 34px;
  background-image: url('http://www.gigacre.com/static/home/pc/images/lo.svg');
  background-size: 100%,100%;
  background-repeat: no-repeat;
  line-height: 26px;
  color: white;
  text-align: center;
}
.options {
  position: relative;
  top: -420px;
  z-index: 999;
  transform: translateZ(0);
}
.optiontop {
  position: fixed;
  top: 10px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  width: 390px;
  z-index: 99999;
  // border-bottom: 1px solid rgb(221,221,221);
}
.isFixed {
  position: sticky;
  top: 50px;
  z-index: 600;
}
.w-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  .text {
    position: relative;
    top: 0.7rem;
  }
  .icon {
    position: relative;
    top: 0.5rem;
    left: 1rem;
  }
}

.main {
}

.main .nav {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #a4a8af;
  margin-top: 0.8125rem;
}

/* content开始 */
.main .content {
  margin-top: 0.5625rem;
}

.main .content .left .picture {
  height: 19.5rem;
}

.main .content .left .picture .leftVR {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 129px;
  height: 129px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.4);
}

.main .content .left .picture .leftVR .leftVRText {
  padding-top: 0.5rem;
  color: white;
  font-size: 5rem;
}

.xiangmucanshu {
  margin-top: 1rem;
  margin-bottom: 2.1875rem;
}

.xiangmucanshu .canshu {
  font-size: 1.5rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5e6069;
}

.xiangmucanshu .shenhe {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #b5b2a5;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  border-radius: 0.875rem;
  border: 1px solid #f5f5f5;
}

.main .content .left .mt-4 {
  margin-bottom: 0.75rem;
}

.main .content .left .mt-4 {
}

.main .content .left .mt-4 .lable {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9c9c9c;
}

.main .content .left .mt-4 .items .item {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-left: 15px;
}

.main .content .left .itemlist {
  margin-top: 2.0625rem;
}

.main .content .left .itemlist .item {
  width: 8.75rem;
  overflow: hidden;
}

.main .content .left .itemlist .item .lable {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9da1aa;
}

.main .content .left .itemlist .item .value {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .content .left .ziliaoxiazai {
  width: 14.1875rem;
  height: 3.9375rem;
  margin-top: 2.3125rem;
}

/* content结束 */
/* duijie开始 */

.main .content .right .yuanquxinxi {
  margin-bottom: 1.625rem;
}

.main .content .right .yuanquxinxi .hangleft {
  width: 12.5rem;
  margin-right: 0.9375rem;
}

.main .content .right .yuanquxinxi .hangleft .title {
  font-size: 1.125rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
}

.main .content .right .yuanquxinxi .hangleft .address {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  margin-top: 0.5rem;
}

.main .content .right .yuanquxinxi .hangright .picture {
  width: 4.6875rem;
  height: 2.9375rem;
}

.main .content .left .qiyeitem {
  margin-top: 2.3125rem;
}

.main .content .left .qiyeitem {
}

.main .content .left .qiyeitem .lable {
  width: 4.375rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9c9c9c;
}

.main .content .left .qiyeitem .items {
  width: 30rem;
  flex-wrap: wrap;
  align-content: flex-start;
}

.main .content .left .qiyeitem .items .item {
  width: 10rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  padding-left: 1rem;
  padding-bottom: 1.25rem;
}

.main .content .right .yuanquxinxi .detail {
  margin-top: 28px;
  font-size: 10px;
  color: #000000;
}

.main .content .right .duijie {
  padding-bottom: 0.625rem;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}

.main .content .right .duijie .liuyanban {
  font-size: 0.875rem;
  padding-left: 1.1875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #ffffff;
  height: 2.8125rem;
  line-height: 2.8125rem;
  background: #fe7743;
  border-radius: 10px 10px 0px 0px;
}

.main .content .right .duijie .duijietype {
  padding-top: 1.25rem;
}

.main .content .right .duijieitem .duijie .duijietype input {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
}

.main .content .right .duijie .inputitem {
  width: 16rem;
  line-height: 2.75rem;
  background: #f9faf9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
  padding-left: 0.625rem;
}

.main .content .right .duijie .fasongitem {
  width: 5.6875rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #fe7743;
  border-radius: 4px;
  margin-top: 15px;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #ffffff;
}

.main .menkan {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #9da1aa;
  margin-left: 2.1875rem;
  padding-top: 0.625rem;
}

.main .menkanvalue {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  line-height: 1.625rem;
  color: #000000;
  padding: 0.875rem 1.375rem;
  background: #fffaf7;
}

.main .jiaotong .items {
  margin-top: 1.25rem;
}

.main .jiaotong .items .item {
  margin-right: 1.375rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #d1d2d6;
}

.main .jiaotong .items .active {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
}

.main .jiaotong .jiaotongditu {
  width: 56.3125rem;
  height: 20.1875rem;
  margin-top: 1.25rem;
  // .optionback{
  // 	background: red;
  // 	width: 100px;
  // 	height: 100px;
  // }
}

.map {
  width: 930px;
  height: 440px;
}
.bannermap {
  width: 100%;
  height: 312px;
}
</style>
